<html> 
<head> 
<title>JS绘制数学函数图</title> 
<style type="text/css"> 
body{ 
margin: 0px; 
padding: 0px; 
} 
</style> 
    <script> 
    //辅助函数 
function $(id){return document.getElementById(id)}; 
/** 
    * 绘图对象 
    * 包含各个绘图函数，比如画点，线段，多边形，圆等 
    * 和一些绘图参数，比如背景颜色，画笔颜色 
**/ 
var Plot = {
    //画布，所有被画出来的元素都append到这个container 
    container: null, 
    //原点x 
    ox: 500, 
    //原点y 
    oy: 300, 
    //坐标颜色 
    baseLineColor: 'black', 
    //画笔颜色 
    brushColor: 'red', 
    //画笔粗细 
    brushWeight: 1, 
    //baseLineX，baseLineY保存坐标线，用于坐标移位 
    baseLineX: null, 
    baseLineY: null, 

    //初始化方法，设置画布，原点位置，坐标线颜色，画笔颜色，画笔粗细 
    init: function(containerId, ox, oy, baseLineColor,brushColor,brushWeight){ 
        if($(containerId)){ 
            Plot.container = $(containerId); 
        }
        else{ 
            alert('You should specify an element in which you can draw plot!'); 
            return; 
        }
        if((typeof ox)=='number'){ 
            Plot.ox = ox; 
        }
        if((typeof oy)=='number'){ 
            Plot.oy = oy; 
        }
        Plot.baseLineColor = baseLineColor; 
        Plot.brushColor = brushColor; 
        Plot.brushWeight = brushWeight; 
        Plot.drawCoordinate(); 
    }, 
    //设置原点函数 
    setOPoint: function(ox,oy){ 
        Plot.ox = ox; 
        Plot.oy = oy; 
        Plot.container.removeChild(Plot.baseLineX); 
        Plot.container.removeChild(Plot.baseLineY); 
        Plot.drawCoordinate(); 
    }, 
    //设置画笔粗细函数 
    setBrushWeight: function(weight){ 
    Plot.brushWeight = weight; 
    }, 
    setBrushColor: function(color){ 
        Plot.brushColor = color; 
    }, 
    //画坐标线 
    drawCoordinate: function(){ 
        var baseLineX = document.createElement('div'); 
        baseLineX.style.position = "absolute"; 
        baseLineX.style.left = 0; 
        baseLineX.style.top = Plot.oy; 
        baseLineX.style.fontSize = '1px'; 
        baseLineX.style.height = '1px'; 
        baseLineX.style.width = '100%'; 
        baseLineX.style.overflow = 'hidden' 
        baseLineX.style.backgroundColor = Plot.baseLineColor; 
        Plot.container.appendChild(baseLineX); 
        Plot.baseLineX = baseLineX; 
        var baseLineY = document.createElement('div'); 
        baseLineY.style.position = "absolute"; 
        baseLineY.style.left = Plot.ox; 
        baseLineY.style.top = 0; 
        baseLineY.style.fontSize = '1px'; 
        baseLineY.style.height = '100%'; 
        baseLineY.style.width = '1px'; 
        baseLineY.style.overflow = 'hidden' 
        baseLineY.style.backgroundColor = Plot.baseLineColor; 
        Plot.baseLineY = baseLineY; 
        Plot.container.appendChild(baseLineY); 
    },
    //清理画布，移走所有对象 
    clean: function(){ 
        Plot.container.innerHTML =""; 
        Plot.drawCoordinate(); 
    },
    //画点，相对原点 
    drawDot: function(x,y){ 
        var dot = document.createElement('div'); 
        dot.style.left = Plot.ox + x + 'px'; 
        dot.style.top = Plot.oy - y + 'px'; 
        dot.style.height = Plot.brushWeight; 
        dot.style.width = Plot.brushWeight; 
        dot.style.position = 'absolute'; 
        dot.style.fontSize = '1px'; 
        dot.style.backgroundColor = Plot.brushColor; 
        dot.style.overflow = "hidden"; 
        Plot.container.appendChild(dot); 
        dot = null; 
    },
    //sin函数曲线，传入角度，比如90，180，360 
    sin: function(angle){
        for(var i=0; i<angle; i++){ 
            Plot.drawDot(i,Math.sin(i/180*Math.PI)*100); 
        }
    },
    //tan函数曲线 
    tan: function(){ 
    for(var i=0; i<720; i++){ 
    if(Math.tan(i/180*Math.PI)*100>Plot.oy){ 
    continue; 
    } 
    Plot.drawDot( i, Math.tan(i/180*Math.PI)*50 ); 
    } 
    }, 
    //cos函数曲线，传入角度，比如90，180，360 
    cos: function(angle){ 
    for(var i=0; i<angle; i++){ 
    Plot.drawDot(i,Math.cos(i/180*Math.PI)*100); 
    } 
    }, 
    //画线从(x0,y0)到(x1,y1) 
    line: function(x0,y0,x1,y1){ 
        //竖线 
    if((x1-x0)==0){ 
    for( var i=((y1>y0)?y0:y1); i<((y1>y0)?y1:y0); i++ ){ 
    Plot.drawDot(x1, i); 
    } 
    return; 
    } 
    //横线 
    if((y1-y0)==0){ 
    for( var i=((x1>x0)?x0:x1); i<((x1>x0)?x1:x0); i++ ){ 
    Plot.drawDot(i, y1); 
    } 
    return; 
    } 
    //斜线 
    //k=斜率，直线方程为y=kx + b 
    var k = (y1-y0)/(x1-x0); 
    if(k<=1){ 
    for(var i=((x1>x0)?x0:x1); i<((x1>x0)?x1:x0); i++){ 
    Plot.drawDot(i, k*i+y1-k*x1 ); 
    } 
    } 
    else{ 
    for(var i=((y1>y0)?y0:y1); i<((y1>y0)?y1:y0); i++){ 
    Plot.drawDot((i-y1+k*x1)/k,i); 
    } 
    } 
    return; 
    }, 
    //画圆，radius是半径，(xi,yi)为圆心 
    circle: function(radius,xi, yi){ 
    if((typeof xi)=='undefined'){ 
    xi = 0; 
    } 
    if((typeof yi)=='undefined'){ 
    yi = 0; 
    } 
    //i为角度，从0到360 
    var i=0; 
    while(i<360){ 
    var _x0 = Math.sin(i/180*Math.PI)*radius; 
    var _y0 = Math.cos(i/180*Math.PI)*radius; 
    var step = radius/100; 
    //随着半径的增大，划出来的圆周断断续续,下面的做法 
    //使画圆周的点数随着半径的增大而增大，使画出来的圆周更圆润. 
    if(1/step>1){ 
    step = 1; 
    } 
    else if(1/step<0.2){ 
    step = 0.2; 
    } 
    else{ 
    step = 1/step; 
    } 
    Plot.drawDot(_x0+xi, _y0+yi); 
    i = i+ step; 
    } 

    }, 
    //画多边形，传入一个点列 
    polygon: function(dots){ 
    if(typeof dots=='undefined'){ 
    alert('you should specify some dots to draw!'); 
    return; 
    } 
    if(dots.constructor!=Array){ 
    alert('you should specify some dots to draw!'); 
    return; 
    } 
    for(var i=0; i<dots.length-1; i++){ 
    Plot.line(dots[i].x,dots[i].y, dots[i+1].x,dots[i+1].y); 
    if(i==1&&dots.length==2){ 
    break; 
    } 
    } 
    Plot.line(dots[0].x, dots[0].y, dots[dots.length-1].x, dots[dots.length-1].y); 
    } 
    }; 
    </script> 
</head> 
<body> 
<div id="main" style="border-bottom: solid red 0px; height:100%; width:100%"> 
</div> 
</body> 
<script> 
    //测试代码 
Plot.init('main', 500, 500, 'green','red',1); 
Plot.sin(720); 
Plot.setBrushWeight(3); 
Plot.cos(720); 
Plot.setBrushWeight(2); 
Plot.circle(200,100,100); 
Plot.setBrushColor('purple'); 
Plot.circle(100,100,100); 
Plot.setBrushColor('blue'); 
Plot.circle(50,100,100); 
var t = new Array(); 
var dots = new Array(); 
dots[0] = {x:-10,y:-10}; 
dots[1] = {x:400,y:10}; 
dots[2] = {x:400,y:300}; 
dots[3] = {x:10,y:300}; 
Plot.polygon(dots); 
</script> 
</html>